19-3 AJAX zPd

本小節將說明如何使用基本 AJAX 概念來達成非同步傳輸的功能。AJAX 的使用方式，主要包含三個基本步驟：
  1. 近端（用戶端）的發送函數：負責在接收主網頁的事件後，設定 AJAX 物件，並對伺服器發送 request 以啟動伺服器端程式碼的執行。
  2. 遠端（伺服器端）的程式碼：通常是一個 ASP 網頁，負責在伺服器執行必要之步驟，例如檢查帳號密碼，或是對資料庫進行查詢等。
  3. 近端（用戶端）的接收函數：負責接收伺服器的執行結果，並將結果以非同步的方式顯示在主網頁上。
無論 AJAX 的應用方式如何複雜，上述三個步驟是不會變化的基本要素。以下我們將使用一個簡單的範例來說明這三個基本步驟：

Example（ajax/asyncViaAjax01.htm）：

在上述範例中，當你點選「使用 AJAX 顯示伺服器的時間」後，就會看到伺服器的時間已經顯示在主網頁上，如下：

而這整個過程並沒有經由網頁的重載來達成。此範例的原始碼如下：

原始檔（ajax/asyncViaAjax01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用 AJAX 顯示伺服器的時間</h2>
<hr>

<script>
// 用戶端的接收函數，負責以非同步方式來接收伺服器回傳的資料並顯示在網頁上
function displayTime() {
	if (ajax.readyState==4)
		if (ajax.status==200)
			document.getElementById('showResult').innerHTML = ajax.responseText;
		else
			alert ("伺服器發生錯誤，無法回傳資料！");
}

// 用戶端的發送函數，負責設定 AJAX 物件並觸發伺服器網頁的執行
function getServerTime(url) {
	ajax = new ActiveXObject("Msxml2.XMLHTTP");
	ajax.onReadyStateChange=displayTime;	// 設定接收伺服器資料的回應函數
	ajax.open("GET", url, true);		// 設定 ajax 物件的參數
	ajax.send("");				// 執行 ajax
}
</script>

<input type="button" value="使用 AJAX 顯示伺服器的時間" onClick="getServerTime('showTime.asp')">
<div id="showResult"></div>

</body>
</html>

對應於前述的三個基本步驟，我們可以列出相關的函數或網頁，如下：

  1. 近端的發送函數：getServerTime()。
  2. 遠端的程式碼：showTime.asp。
  3. 近端的接收函數：displayTime()。
以下將說明這幾個函數或網頁的流程。
  1. 近端的發送函數是 getServerTime()，主要負責當使用者點選按鈕後，產生 AJAX 物件並設定之，然後對伺服器發出 request，說明如下：
    1. 首先，我們使用 ajax = new ActiveXObject("Msxml2.XMLHTTP"); 來產生一個 AJAX 物件，利用此物件，我們可以達到非同步傳輸的功能。

      Hint
      但必須特別注意的是，產生 AJAX 物件的方式，在不同的瀏覽器（如 IE 及 FireFox）有不同的方法，甚至同樣是 IE 瀏覽器，不同的版本也有不同的方式來產生 AJAX 物件，本範例所使用的方式，適用於 IE 6.0 之後的版本。為了處理這些相容性的問題，我們建議直接採用 JavaScript Framework，例如 Prototype.js，有關這些細節，後在下一小節介紹。

    2. 產生 AJAX 物件之後，我們即可對此物件設定各種性質。首先，我們使用 ajax.onReadyStateChange=displayTime; 來設定接收伺服器回應的函數，在此範例中，此接收函數是 displayTime()。
    3. 其次，我們使用下列方式來設定 AJAX 物件的其它性質： ajax.open("GET", url, true); 其中 "GET" 代表資料傳遞的方式，url 代表伺服器程式碼所在的網頁（在此例為 showTime.asp），而 true 則代表使用非同步傳輸。（若是 false，代表使用同步傳輸。）
    4. 最後，我們使用 ajax.send(""); 來送出 AJAX 的命令，換句話說，此時會先啟動伺服器的程式碼（在此例為 showTime.asp），然後再啟動用戶端的接收函數（在此例為 displayTime()），將結果以非同步的方式顯示在目前網頁內。
  2. 遠端的程式碼位於 showTime.asp，以本例而言，其功能相當簡單，只是印出現在的時間，內容如下：

    原始檔（ajax/showTime.asp）：（灰色區域按兩下即可拷貝）
    <%@language=jscript%>
<%//負責讀取目前時間的 AJAX 遠端程式%>
<%
today=new Date();
time=today.toString();
Response.write("<font color=red>"+time+"</font>");
%>

  3. 近端的接收函數是 displayTime()，它的流程稍微複雜一些：
    1. 檢查伺服器程式碼是否執行完畢： if (ajax.readyState==4) readyState 代表 ajax 目前的狀態，列表如下：
      readyState 的值說明
      0尚未啟始
      1已經建立連結
      2遠端已經收到要求
      3遠端程式碼處理中
      4處理完畢
    2. 此外，此函數也必須檢查伺服器回應函數是否執行無誤： if (ajax.status==200) 也就是說，只有當網頁 showTime.asp 回傳的狀態碼是 200 時，才代表 showTime.asp 的執行無誤。
    3. 一切無誤後，我們才將 AJAX 回傳的文字資訊（存放於 ajax.responseText）指定給 id 為 showResult 的區塊內容： document.getElementById('showResult').innerHTML = ajax.responseText; 此時我們就可以在主網頁看到遠端的時間。

      Hint
      伺服器程式碼回傳的原始資訊，會原封不動地放到 responseText 此性質中。如果伺服器回傳的資訊是 XML 文件格式，我們可以由另一個性質 responseXML 來讀取 XML 文件內的各個物件。

JScript 程式設計與應用：用於伺服器端的 ASP 環境